import React from 'react';
import Lng from "../common/lng";
import {Col, Form, Input, InputNumber, Row, Select, Spin} from "antd";
import DishDetail from "./DishDetail";
import Service from "./Service";

class EditDishForm extends DishDetail {

    constructor() {
        super();

        this.state.types = [];
        this.state.specs = [];
    }

    componentDidMount() {
        super.componentDidMount();
        const self = this;
        Service.listDeviceTypeAndSpec((types, specs) => {
            self.setState({
                types: types.data,
                specs: specs.data
            });
        });
    }

    renderTimeUnit(value) {
        return (
            <Select style={{width: 90}}>
                <Select.Option key={"".uuid()} value={"H"}>{Lng.get("common.H")}</Select.Option>
                <Select.Option key={"".uuid()} value={"M"}>{Lng.get("common.M")}</Select.Option>
                <Select.Option key={"".uuid()} value={"S"}>{Lng.get("common.S")}</Select.Option>
            </Select>
        )
    }

    formatSpec(spec) {
        if (spec["volumeUnit"] != null) {
            return spec.volume + " " + spec.volumeUnit;
        } else if (spec["sizeUnit"] != null) {
            return spec["length"] + " * " + spec["width"] + " " + spec.sizeUnit;
        } else {
            return spec["count"] + " " + Lng.get("dishSpec.G");
        }
    }

    render() {
        const {dish, types, specs} = this.state;
        const self = this;
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 14},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 10},
            }
        };
        return (
            <Spin spinning={this.state.loading}>
                <Form layout="inline">
                    <div className={"dish-detail"}>
                        <Row>
                            <Col span={6}>
                                <label>{Lng.get("dish.code")}：</label>
                            </Col>
                            <Col span={6}>
                                <label>{dish.code}</label>
                            </Col>
                            <Col span={6}>
                                <label>{Lng.get("dish.name")}：</label>
                            </Col>
                            <Col span={6}>
                                <label>{dish.name}</label>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={6}>
                                <label>{Lng.get("dish.dishTypeName")}：</label>
                            </Col>
                            <Col span={6}>
                                <label>{dish.dishTypeName}</label>
                            </Col>
                            <Col span={6}>
                                <label>{Lng.get("store.name")}：</label>
                            </Col>
                            <Col span={6}>
                                <label>{dish.storeName}</label>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={6}>
                                <label>{Lng.get("dish.firstSpell")}：</label>
                            </Col>
                            <Col span={6}>
                                <label>{dish.letterFirPy}</label>
                            </Col>
                            <Col span={6}>
                                <label>{Lng.get("dish.deviceDisplayName")}：</label>
                            </Col>
                            <Col span={6}>
                                <label>{dish.deviceDisplayName}</label>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={6}>
                                <label>{Lng.get("dish.unit")}：</label>
                            </Col>
                            <Col span={6}>
                                <label>{dish.unit}</label>
                            </Col>
                        </Row>
                        <hr/>
                        <Form.Item
                            label={Lng.get("dish.merge")}
                        >
                            {getFieldDecorator('merge', {
                                rules: [{
                                    required: true,
                                    message: Lng.get("common.select", {some: Lng.get("dish.merge")})
                                }],
                                initialValue: dish.merge
                            })(
                                <Select style={{width: 90}}>
                                    <Select.Option key={"".uuid()}
                                                   value={false}>{Lng.get("common.no")}</Select.Option>
                                    <Select.Option key={"".uuid()}
                                                   value={true}>{Lng.get("common.yes")}</Select.Option>
                                </Select>
                            )}
                        </Form.Item>
                        <Form.Item
                            label={Lng.get("dish.device")}
                        >
                            {getFieldDecorator('deviceTypeCode', {
                                rules: [{
                                    required: true,
                                    message: Lng.get("common.select", {some: Lng.get("dish.device")})
                                }],
                                initialValue: dish.deviceTypeCode
                            })(
                                <Select style={{width: 90}}>
                                    {
                                        types.map((t) => {
                                            return <Select.Option key={"".uuid()}
                                                                  value={t.code}>{t.name}</Select.Option>
                                        })
                                    }
                                </Select>
                            )}
                        </Form.Item>
                        <Form.Item
                            label={Lng.get("dish.expTime")}
                        >
                            {getFieldDecorator('expTime', {
                                rules: [{
                                    required: true,
                                    message: Lng.get("common.placeholder", {some: Lng.get("dish.expTime")})
                                }],
                                initialValue: dish.expTime
                            })(
                                <InputNumber min={0}/>
                            )}
                        </Form.Item>
                        <Form.Item
                            label={Lng.get("dish.expTimeUnit")}
                        >
                            {getFieldDecorator('expTimeUnit', {
                                rules: [{
                                    required: true,
                                    message: Lng.get("common.select", {some: Lng.get("dish.expTimeUnit")})
                                }],
                                initialValue: dish.expTimeUnit
                            })(
                                this.renderTimeUnit(dish.expTimeUnit)
                            )}
                        </Form.Item>
                        <Form.Item
                            label={Lng.get("dish.processTime")}
                        >
                            {getFieldDecorator('processTime', {
                                rules: [{
                                    required: true,
                                    message: Lng.get("common.placeholder", {some: Lng.get("dish.processTime")})
                                }],
                                initialValue: dish.processTime
                            })(
                                <InputNumber min={0}/>
                            )}
                        </Form.Item>
                        <Form.Item
                            label={Lng.get("dish.processTimeUnit")}
                        >
                            {getFieldDecorator('processTimeUnit', {
                                rules: [{
                                    required: true,
                                    message: Lng.get("common.select", {some: Lng.get("dish.processTimeUnit")})
                                }],
                                initialValue: dish.processTimeUnit
                            })(
                                this.renderTimeUnit(dish.processTimeUnit)
                            )}
                        </Form.Item>
                        <Form.Item
                            label={Lng.get("dish.spec")}
                        >
                            {getFieldDecorator('dishSpecCode', {
                                rules: [{
                                    required: false,
                                    message: Lng.get("common.select", {some: Lng.get("dish.spec")})
                                }],
                                initialValue: dish.dishSpecCode
                            })(
                                <Select style={{width: 200}}>
                                    {
                                        specs.map((s) => {
                                            return <Select.Option key={"".uuid()} value={s.code}>
                                                {self.formatSpec(s)}
                                            </Select.Option>
                                        })
                                    }
                                </Select>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('id', {
                                rules: [{
                                    required: true,
                                    message: Lng.get("common.select", {some: Lng.get("dish.spec")})
                                }],
                                initialValue: dish.id
                            })(
                                <Input className={"hide"}/>
                            )}
                        </Form.Item>
                    </div>
                </Form>
            </Spin>
        )
    }
}

const _EditDishForm = Form.create()(EditDishForm);
export default _EditDishForm;